<template>
		
		<view style="height: 100%; background-color: #ffffff;">
			<view class="status_bar"> </view>
			       

				<image class="toumu" :src="userInfo.backGround" mode= "aspectFill"> </iamge>
				<view style="border-radius: 50rpx;height:auto;background-color: #ffffff;">

				<view class="man" >
					<view>
					<image style=" height:120rpx;width:120rpx;border-radius:50%;flex-shrink: 0;margin: 20rpx 20rpx 20rpx 30rpx;background-color: #dddddd;" :src="userInfo.avatar" mode="aspectFill" ></image>
                    <view v-if="userInfo.realarrest!=1||userInfo.collegearrest!=1" style="color: coral;margin-top: -30rpx;font-size: 25rpx;">  未完成信息认证</view>
					</view>
					<view>
			        <view  style="width: 350rpx;display: flex;margin: 20rpx 30rpx 20rpx 20rpx;">
					<view style="font-size: 40rpx;font-weight: bold;">{{userInfo.username}}</view>
					<view style="margin-top: 5rpx;margin-left: 50rpx;padding-left: 20rpx;padding-top: 10rpx;">
					<u-icon size="40"  :name="sex" ></u-icon>
					</view>
					</view>
					<view style="margin-left: 20rpx;font-size: 28rpx;">{{userInfo.slogan}}</view>
					</view>
					<u-icon size="60" style="padding-bottom: 20rpx;" name="arrow-right" @click="changInfo"></u-icon>
					</view>
					<view style="height: auto;display:flex;">
					<view style="background-color: white;display: flex;flex-wrap: wrap;margin:0rpx 20rpx 20rpx 30rpx;padding: 10rpx 10rpx 20rpx 20rpx;width:600rpx">
						<u-tag  v-if="userInfo.school!=null" :text="userInfo.school" shape="circle"   plain borderColor="#ffbb98" @close="close(index)" style="width: auto;margin: 5rpx 5rpx 5rpx 5rpx;S"></u-tag>
						<u-tag v-if="userInfo.age!=null" :text="userInfo.age" shape="circle"   plain borderColor="#ffbb98" @close="close(index)" style="width: auto;margin: 5rpx 5rpx 5rpx 5rpx;"></u-tag>
						<u-tag v-if="userInfo.work!=null" :text="userInfo.work" shape="circle"   plain borderColor="#ffbb98" @close="close(index)" style="width: auto;margin: 5rpx 5rpx 5rpx 5rpx;"></u-tag>
					    <u-tag v-if="userInfo.mbti!=null" :text="userInfo.mbti" shape="circle"   plain borderColor="#ffbb98" @close="close(index)" style="width: auto;margin: 5rpx 5rpx 5rpx 5rpx;"></u-tag>
						<u-tag v-if="userInfo.constellation!=null" :text="userInfo.constellation" shape="circle"  :show="show" plain borderColor="#ffbb98" @close="close(index)" style="width: auto;margin: 5rpx 5rpx 5rpx 5rpx;"></u-tag>
						<u-tag v-if="userInfo.hobby1!=null" :text="userInfo.hobby1" shape="circle"   plain borderColor="#ffbb98" @close="close(index)" style="width: auto;margin: 5rpx 5rpx 5rpx 5rpx;"></u-tag>
						<u-tag v-if="userInfo.hobby2!=null" :text="userInfo.hobby2" shape="circle"   plain borderColor="#ffbb98" @close="close(index)" style="width: auto;margin: 5rpx 5rpx 5rpx 5rpx;"></u-tag>
						<u-tag v-if="userInfo.hobby3!=null" :text="userInfo.hobby3" shape="circle"   plain borderColor="#ffbb98" @close="close(index)" style="width: auto;margin: 5rpx 5rpx 5rpx 5rpx;"></u-tag>
					</view>
					
					
										<!-- <view style="background-color: white;display: flex;width:550rpx;">
											<view v-if="userInfo.school!==null" style="border: 3rpx solid #ffbb98;">{{userInfo.school}}</view>
											<view v-if="userInfo.age!==null" style="border: 3rpx solid #ffbb98;">{{userInfo.age}}</view>
											<view v-if="userInfo.work!==null" style="border: 3rpx solid #ffbb98;">{{userInfo.work}}</view>
											<view v-if="userInfo.mbti!==null" style="border: 3rpx solid #ffbb98;">{{userInfo.mbti}}</view>
											<view v-if="userInfo.constellation!==null" style="border: 3rpx solid #ffbb98;">{{userInfo.constellation}}</view>
											<view v-if="userInfo.hobby1!==null" style="border: 3rpx solid #ffbb98;">{{userInfo.hobby1}}</view>
											<view v-if="userInfo.hobby2!==null" style="border: 3rpx solid #ffbb98;">{{userInfo.hobby2}}</view>
											<view v-if="userInfo.hobby3!==null" style="border: 3rpx solid #ffbb98;">{{userInfo.hobby3}}</view>
					
										</view>
										</view> -->
					
					<view style="width: 100rpx;border-radius: 30rpx;height: 50rpx;margin-top: 15rpx;padding-top:5rpx;border-color: #ffbb98;border-style:solid;text-align:center;margin-left:auto;margin-right:50rpx;"  @click="signedit" >+</view>
					<!-- <view style="width: 100rpx;border-radius: 30rpx;height: 50rpx;margin-top: 12rpx;margin-right: 50rpx;border-color: #ffbb98;"  @click="isshow=true" >+</view> -->
					<!-- 标签弹窗 -->
						
							
							<!-- 性别选择 -->
							<!-- <u-select v-model="showGender" :list="gender" @confirm="saveGender"></u-select> -->
						</view>
				    </view>
					
							
						
			
			<view class="navi">
				<u-grid :col="4" :border="false"  @click="toNav">
					<u-grid-item  >
						<image class="gn-icon" src="https://zzzsep.oss-cn-beijing.aliyuncs.com/2024/04/01/219b306088f84f579f5ab36d57bc12ccmypartner.png"> </image>
						<view class="grid-text" style="font-size: 24rpx;">我的寻搭</view>
					</u-grid-item>
					<u-grid-item >
						<image  class="gn-icon" src="/static/myactivity.png"></image>
						<view class="grid-text" style="font-size: 24rpx;">我的活动</view>
					</u-grid-item>
					<u-grid-item >
						<image class="gn-icon"  src="/static/settings.png"></image>
						<view class="grid-text" style="font-size: 24rpx;">设置</view>
					</u-grid-item>
					<u-grid-item >
						<image  class="gn-icon" src="/static/arrestation.png"></image>
						<view class="grid-text" style="font-size: 24rpx;">身份认证</view>
					</u-grid-item>	
					<u-grid-item >
						<image  class="gn-icon" src="/static/arrestation.png"></image>
						<view class="grid-text" style="font-size: 24rpx;">学籍认证</view>
					</u-grid-item>	
				</u-grid>
				
			</view>
		    <view>
				<view style="margin-left: 40rpx;background: linear-gradient(to left,#dff0fc,#fedac4);width: 250rpx;height: 50rpx;padding-left: 40rpx;padding-top: 20rpx;">进行中的事项</view>
				<view style="height: 200rpx;width: 90%;background-color: #f2f2f2;margin: auto;">
					<view style="display: flex;padding-top: 30rpx;padding-left: 20rpx;padding-right: 20rpx;">
					<view style="background-color: #f9f9f9;margin: 5rpx 10rpx 0 10rpx;width: 280rpx;">
						<view style="padding: 10rpx 10rpx 10rpx 10rpx;font-size: 25rpx;">
						<view v-if="Object.keys(myrecentarticles).length!=0">{{myrecentarticles[0].title}}</view>
						<view v-if="Object.keys(myrecentarticles).length!=0">{{myrecentarticles[0].startTime!=null?myrecentarticles[0].startTime.replace("T"," "):"待定"}}</view>
						</view>
					</view>
					<view style="background-color: #f9f9f9;margin: 5rpx 10rpx 0 10rpx;width: 280rpx;">
						<view style="padding: 10rpx 10rpx 10rpx 10rpx;font-size: 25rpx;">
						<view v-if="Object.keys(myrecentactivities).length!=0">{{myrecentactivities[0].title}}</view>
						<view v-if="Object.keys(myrecentactivities).length!=0">{{myrecentactivities[0].startTime!=null?myrecentactivities[0].startTime.replace("T"," "):"待定"}}</view>
						</view>
					</view>
					<u-icon size="50" name="arrow-right" @click="eventlist"></u-icon>
					</view>
					
			</view>
			</view>
					
	      <view class="feedback" @click="feedback">
	      	问题反馈
	      </view>
		  <view class="feedback" @click="ifbusiness=true">
		  	商务合作
		  </view>
		  <u-popup :show="ifbusiness" mode="center" customStyle="width:70%;padding:20rpx;border-radius: 15rpx;">
			  <view style="margin: 20rpx 0;">
			  	<p>商务合作请联系我们：</p>
			  </view>
			  <p>邮箱：like-mindedus@qq.com</p>
			  <p>手机号：13939198681</p>
			  <view style="margin-bottom: 50rpx;">
			  	<p>微信：Wandar200</p>
			  </view>
			  <u-button style="border-radius: 30rpx;margin-top: 12rpx;margin-right: 50rpx;background-color: #ffbb98;color: white;" @click="ifbusiness=false" >关闭</u-button>
		  </u-popup>
		</view>
</template>

<script>
	export default {
		data(){
			return{
				userInfo: {},
				name:"",
				sex:'',
				id:"",
				collage:"",
				education:"",
			    one:"",
				onetime:"10月15日",
				onetongzhi:"",
				two:"",
				twotime:"",
				twotongzhi:"",
				ifbusiness:false,
				show: true,

                city:'',
				isshow:false,

				myrecentarticles:{},
				myrecentactivities:{},
                post:{}

			}
		},
		onShow(options) {
					if (!uni.getStorageSync("hasLogin")) {
							this.$u.toast('请先登录哦');
							uni.navigateTo({
								url:'/pages/login/index'
							})
						}
						// uni.removeStorageSync('userInfo')
						// uni.removeStorage('userInfo')
						this.getUserInfo();
						// console.log(this.userInfo)
						
						this.$H.get('articles/recent').then(res=>{
							
							this.myrecentarticles=res.result
						})
						this.$H.get('activities/recent').then(res=>{
							
							this.myrecentactivities=res.result
						})
						// #ifdef MP-WEIXIN
						uni.authorize({
						    scope: 'scope.userLocation',
						    success() {
						        uni.getLocation({
								type: 'gcj02',
														success: function(res) {
														console.log(res)
														}
						    })
							}
						})
						// #endif
						uni.getLocation({
							type: 'gcj02',
							geocode: true,
							highAccuracyExpireTime: 3000,
								success: (lb) => {
									console.log('当前位置的经度：' + lb.longitude);
									console.log('当前位置的纬度：' + lb.latitude);
									// this.position.latitude = lb.latitude;
									// this.position.longitude = lb.longitude;
									// let  key = '';//高德地图key
									uni.request({
										url:'https://restapi.amap.com/v3/geocode/regeo?location='+lb.longitude+ ',' + lb.latitude + '&key=4cd9b4407a8d3677920e307540f1035e&radius=1000&extensions=all',
										success: (res) => { 
											// console.log('高德地图API接口返回信息',res)
											let city = res.data.regeocode.addressComponent.city+res.data.regeocode.addressComponent.district; 
											 this.post.city=city
											 this.post.id=this.userInfo.id
											this.$H.post("user/update",this.post).then(res => {
											 //    console.log(res)
												// if (res.code == 200) {
												// 	uni.showToast({
												// 		title:"修改成功"
												// 	})
												// }
											})
										},
						
								    	fail: (err) => {
								    		uni.showToast({
								    			title: "获取位置信息失败",
								    			icon: "none"
								    		});
								    	},
											});
													}
						})
						// uni.authorize({
						// 				scope: 'scope.userLocation',
						// 				success() {
						// 					console.log("用户授权了位置")
						// 					uni.getLocation({
						// 						type: 'gcj02',
						// 						success: function(res) {
						// 							console.log(res)
						// 							let location = {
						// 								longitude: res.longitude,
						// 								latitude: res.latitude
						// 							}
						// 							let locationJson = JSON.stringify(location)
						// 							//	比较用户当前位置信息，如果位置信息和之前的位置信息不一致，则更新
						// 							//	赋值位置信息
						// 							// _this.location = location
						// 							// if (oldLocationJson != locationJson) {
						// 							// 	uni.setStorageSync("location", locationJson)
						// 							// 	_this.mescroll.resetUpScroll()
						// 							// }
						// 						},
						// 						fail: (err) => {
						// 							uni.showModal({
						// 								title: '',
						// 								content: '请在系统设置中打开定位服务',
						// 								confirmText: '确定',
						// 								success: function(res) {}
						// 							})
						// 						}
						// 					})
						// 				},
						// 				fail: (err) => {
						// 					console.log("用户拒绝了位置")
						// 					this.openSettingPage()
						// 				}
						// 			})

					
				},
		methods:{
			isShow(){
				this.isshow=true
			},
			close(){
				this.show=false
			},
			feedback(){
				uni.navigateTo({
					url:"/pages/mine/feedback/feedback"
				})
			},
			torizhi(){
				uni.navigateTo({
					url: '/pages/mine/rizhi/rizhi'
				})
			},
			torichang(){
				uni.navigateTo({
					url: '/pages/mine/richang/richang'
				})
			},
			torichang(){
				uni.navigateTo({
					url: '/pages/mine/huodong/huodong'
				})
			},
			toxunda(){
				uni.navigateTo({
					url: '/pages/mine/xunda/xunda'
				})
			},
			toevent(){
				// console.log("123")
				uni.navigateTo({
					url:'/pages/mine/eventList'
				})
			},
			changInfo(){
				uni.navigateTo({
					url:'/pages/mine/more/more'
				})
			},
			eventlist(){
				uni.navigateTo({
					url:'/pages/mine/eventList?myrecentarticles='+JSON.stringify(this.myrecentarticles)+'&myrecentactivities='+JSON.stringify(this.myrecentactivities)
				})
			},
			toNav(e){
				if(e==0) uni.navigateTo({
					url:'/pages/mine/myActivity/myActivity?page=0'
				})
				if(e==1) uni.navigateTo({
					url:'/pages/mine/myActivity/myActivity?page=1'
				})
				if(e==2) uni.navigateTo({
					url: '/pages/mine/setting/setting'
				})
				if(e==3) uni.navigateTo({
					url: '/pages/mine/attestation/attestation'
				})
				if(e==4) uni.navigateTo({
					url: '/pages/mine/collegeArrest/collegeArrest'
				})
				
			},
			changeIfo(){
							uni.navigateTo({
								url:'/pages/mine/edit-info'
							})
						},
			signedit(){
				uni.navigateTo({
					url:"/pages/mine/more/more"
				})
			},
			getUserInfo() {
							this.$H.get("user/userInfo").then(res => {
							
								this.userInfo = res.result
								
								 if(this.userInfo.gender==0){this.sex="man"}
								 if(this.userInfo.gender==1){this.sex="woman"}
								 if(this.userInfo.backGround==null){this.userInfo.backGround="http://zzzsep.oss-cn-beijing.aliyuncs.com/2024/03/18/e9bf877d4d6942528512dad2451407f2toumu1.png"}
								// if (res.result.gender === 1) {
								// 	this.userInfo.gender = '男'
								// } else if (res.result.gender === 2) {
								// 	this.userInfo.gender = '女'
								// } else {
								// 	this.userInfo.gender = '保密'
								// }
								this.userInfo.hobby=this.userInfo.hobby.split(",")
								this.userInfo.hobby1=this.userInfo.hobby[0]
								this.userInfo.hobby2=this.userInfo.hobby[1]
								this.userInfo.hobby3=this.userInfo.hobby[2]
						        uni.setStorageSync("userInfo",this.userInfo)
						
							})
							
						},
		}
	}
			
	
</script>

<style lang="scss">
	.status_bar {
	        height: var(--status-bar-height);
	        width: 100%;
	    }

	.toumu{
		height: 300rpx;
		width: 100%;
		z-index: 2;
		
	}
	.man{
		display: flex;
		width: 90%;
		height: auto;
		
		padding-top: 50rpx;
		margin:  auto;
	}
	.tag{
			width: auto;
			padding: 5rpx 20rpx;
			border:1px solid #ffbb98;
			border-radius: 25rpx;
			margin: 2rpx 2rpx 40rpx 40rpx;
			}
	.navi{
			width: 90%;
			height: auto;
			padding-bottom: 20rpx;
			margin: auto;
			.gn-icon {
					width: 60rpx;
					height: 60rpx;
					margin-bottom: 10rpx;
					margin-top: 10rpx;
					padding: 20rpx;
					background:linear-gradient(to bottom right,#dff0fc,#fedac4);
					border-radius: 25%;
					border:solid;
					border-width:4rpx;
					border-color:#ffa378;
				}
		}
		.feedback{
			text-align: center;
			margin: 40rpx;
		}
	.shixiang{
		width: 90%;
		height: 250rpx;
		border-radius:30rpx ;
		background-image: linear-gradient(to right,#dadef9,#e5f9f8);
		margin: 40rpx auto;
		box-shadow:4rpx 4rpx 0 0 #bbcde2 ;
	}
	.a{
		width: 300rpx;
		margin-top: -300rpx;
		margin-left: 40rpx;
		background-color: #91dad7;
		color: #f3fcff;
		font-size: 40rpx;
		font-weight: bold;
		text-align: center;
	}
	.A  {
		height: 200rpx;
		width: 87%;
		white-space: nowrap;
		margin-top: 20rpx;
		margin-left: 40rpx;
		.aa{
			overflow-y: auto;
			background-color: #e2fefe;
			width: 200rpx;
			height: 150rpx;
			 text-align: center;
			display: inline-block;
			margin-left: 20rpx;
			padding: 0 50rpx;
			border-radius: 30rpx;
			.aaa{
				margin-left: -30rpx;
				overflow: auto;
				font-size: 30rpx;
				font-weight: bold;
				padding-top: 5rpx;
			}
		}	
		.bb{
			display: flex;
			width: 50rpx;
			height: 70rpx;
			background-color:#9fdcdc ;
			color: #f3fcff;
			margin-top: 11rpx;
			margin-left: 200rpx;
			font-weight: bold;
		} 
	}	
	.B{
		margin: auto;
		width: 90%;
		height: auto;
		margin-top: 50rpx;
		display: flex;
		.C{
			margin: auto;
			.cc{
				width: 120rpx;
				height: 120rpx;
				background-color: #c9cdeb;
				border-radius: 30rpx;
				display: flex;
				justify-content: center;
				align-items: center;	
			}
			.dd{
				margin-left: 15rpx;
				font-size: 25rpx;
				font-weight: bold;
			}
		}
		
	}
</style>
